<template>
    <div class="user-info">
      <CenterContent>
        <el-row :gutter="30">
         <el-col :span="4">
           <el-card class="user-info-block">
             <el-row :gutter="10" style="height: 64px" type="flex" justify="start"  align="middle">
              <el-col :span="7">
                <el-avatar :size="60"  src="http://pic4.zhimg.com/50/v2-7fece9a613445edb78271216c8c20c6d_hd.jpg"></el-avatar>
              </el-col>
               <el-col :span="12" push="2">
                 <span>{{$store.getters.getUser.name}}</span>
                  <span><el-button type="primary" size="mini" style="margin-top: 10px">编辑资料</el-button></span>
               </el-col>
             </el-row>
           </el-card>

           <el-card class="user-info-cat">
             <el-row :gutter="10" type="flex" align="middle" justify="center">
              <el-col :span="16">
                <div class="user-cat-title">
                  <i class="el-icon-goods" ></i>
                    <span>订单中心</span>
                  <div class="user-cat-item">
                    <ul>
                      <li><el-link :underline="false">我的订单</el-link></li>
                      <li><el-link :underline="false" @click="$router.push({name:'user.address'})">收货地址</el-link></li>
                      <li><el-link :underline="false">评论列表</el-link></li>
                    </ul>
                  </div>
                </div>
              </el-col>
             </el-row>

           </el-card>
         </el-col>

<!--         右侧-->
          <el-col :span="17" class="user-info-right">
            <el-card class="box-card">
              <div slot="header" class="header">
                <span>{{current}}</span>
              </div>
              <router-view></router-view>
            </el-card>
          </el-col>
        </el-row>
      </CenterContent>
    </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      avatarUrl: '../v',
      current: '收货地址'
    }
  }
}
</script>

<style scoped lang="scss">
  .user-info{
    margin: 20px;
    .user-info-block{

    }
    .user-info-cat {
      height: 748px;
      margin-top: 30px;
    }
     .user-cat-title {
      font-size: 24px;
      i {
        color: #409EFF;
      }
       ul li {
         padding: 5px 30px;
         list-style: none;
         /deep/ a {
           font-size: 16px;
         }
       }
    }
    .user-info-right {
      height: 886px;
      .box-card {
        height: 100%;
        .header {
          padding: 10px;
          font-size: 24px;
        }
      }
    }
  }
</style>
